//该组件用于递归子菜单
<template>
  <!-- 有的菜单是没有子项的 -->
  <sub-menu>
    <!-- <title: slot name="title"></title:> -->
    <template #title>{{ data.title }}</template>
    <!-- <sub-item: slot></sub-item:> -->
    <template v-for="c of data.children">
      <menu-item v-if="!c.children" :key="c.id">{{ c.title }}</menu-item>

      <!-- 有的菜单是有子项的 -->
      <!-- 递归自己 -->
      <!-- 这个组件本身也需要data属性 -->
      <re-sub-menu v-else :key="c.id" :data="c"></re-sub-menu>
    </template>
  </sub-menu>
</template>

<script>
export default {
  //这里定义名字的作用在于递归组件
  name: "ReSubMenu",
  //每次都会传入data
  props: {
    //Object -> 整个item -> {...}
    data: Object,
  },
};
</script>